<script setup>
	import { ElButton,ElInput,ElTable,ElTableColumn } from "element-plus"
	import { onMounted, ref,reactive} from "vue"
	import {getRoleList} from "../api"
	import Header from "@/components/Header.vue"
	let input = ref("");
	//表格中的数据
	let tableData = reactive([])
	let data={
		"pageSize":10,
		"pageIndex":1
	}

	onMounted(async()=>{
		let res= await getRoleList(data)
		for(let i=0;i<res.list.length;i++){
			tableData.push(res.list[i])
		}
		// console.log(tableData)
	})
</script>
<template>
	
<div class="common-layout">
	<el-container>
		<el-header><Header></Header></el-header>
		<el-main>
			<div class="box">
				<div class="leftBox">
					<RouterLink to="/hideviprecharge">会员充值</RouterLink>
				</div>
				<div class="leftBox">
					<RouterLink to="/hidedistribute">分销</RouterLink>
				</div>
			</div>
			
		</el-main>
	</el-container>
</div>

</template>

<style lang="less" scoped>
	.box{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		.title{
			font-size: 20px;
		}
		// .header{
		// 	display: flex;
		// }
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.box{
				width: 100%;
				height: 100%;
				display: flex;
				box-sizing: border-box;
				padding: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				.leftBox{
					width: 300px;
					height: 170px;
					background-color: #ececec;
					border:1px solid #000;
					margin: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					a{
						text-decoration: none;
						color:#000
					}
				}
				
			}
		}
	}
</style>